<template>
  <div style="padding: 20px">
    <el-card class="box-card" v-loading="loading">
      <template #header>
        <div class="card-header">
          <span style="font-weight: 900">通知公告</span>
        </div>
      </template>
      <div
        v-for="(item, index) in resultList"
        :key="index"
        class="content"
        @click="showInfo(item)"
      >
        <el-link :underline="false">
          <el-badge is-dot class="item" v-if="item.noticeStatus != '1'">
            <dict-tag :options="sys_notice_type" :value="item.noticeType" />
          </el-badge>
          <dict-tag
            v-else
            :options="sys_notice_type"
            :value="item.noticeType"
          />&#12288;{{ item.noticeTitle }}
        </el-link>
        <div>
          <el-link :underline="false" type="primary" v-if="!checkRole(['student'])">
            已读:{{ item.noticeReadCount }}&#12288;&#12288;
          </el-link>
          <el-link :underline="false">{{ item.createTime }} </el-link>
        </div>
      </div>
    </el-card>
    <pagination
      v-show="queryParams.total > 0"
      :total="queryParams.total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
      layout="prev, pager, next"
      :background="false"
      style="margin-bottom: 20px; margin-top: 0"
    />
    <el-dialog
      v-model="dialogVisible"
      title="公告详情"
      width="800px"
      append-to-body
    >
      <div>
        <div style="height: 50px; line-height: 50px">
          <span style="font-weight: 700">公告标题：</span
          >{{ selectItem.noticeTitle }}
        </div>
        <div style="height: 50px; line-height: 50px">
          <span style="font-weight: 700">公告日期：</span
          >{{ selectItem.createTime }}
        </div>
        <Editor
          v-model="selectItem.noticeContent"
          :min-height="192"
          :readOnly="true"
          :toolbarFlag="false"
        ></Editor>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import { listNotice } from "@/api/system/notice";
import useUserStore from "@/store/modules/user";
import { checkRole } from "@/utils/permission";

const userStore = useUserStore();
const { proxy } = getCurrentInstance();
const { sys_notice_type } = proxy.useDict("sys_notice_type");
let dialogVisible = ref(false);
let selectItem = reactive({});
let resultList = ref([]);
let loading = ref(false);
let queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  userId: userStore.id,
});
/** 查询公告列表 */
function getList() {
  loading.value = true;
  proxy
    .$http({
      url: "/system/notice/userNoticeList",
      method: "get",
      params: queryParams,
    })
    .then((response) => {
      resultList.value = response.rows;
      queryParams.total = response.total;
      loading.value = false;
    });
  // listNotice(queryParams.value).then(response => {
  //   resultList.value = response.rows;
  //   queryParams.total = response.total;
  //   loading.value = false;
  // });
}
const showInfo = (item) => {
  if (item.noticeStatus != 1) {
    item.noticeStatus = 1;
    item.userId = userStore.id;
    proxy
      .$http({
        url: "/user/notice",
        method: "post",
        data: item,
      })
      .then((res) => {
        getList()
      });
  }
  dialogVisible.value = true;
  selectItem = item;
};
onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: space-between;
  height: 28px;
  line-height: 28px;
  margin: 20px 10px;
  cursor: pointer;
  .point {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #000;
    margin-right: 20px;
  }
  .content_left {
    color: #f8ac59;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 70%;
    white-space: nowrap;
  }
}
:deep(.pagination-container .el-pagination) {
  right: 20px;
}
</style>
